<template>
  <div class="log">
    <h1>Yolov5 Training Logs</h1>
    <a-button @click="Run()">Run command</a-button>
    <div id="content">
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      ws: 'http://127.0.0.1:5000/test', 
      count: 0
    }
  },
  methods: {
    Run() {
      let socket = io('ws://127.0.0.1:5000/test'); 
      socket.on('connect', () => {
        console.log('connected');
        document.getElementById('content').innerHTML = ''; 
      });
      socket.emit('fuck', {data: 'fuck you'});
      socket.on('response', response => {
          console.log(response); 
          document.getElementById('content').append(response.data)
          // socket.close();
      });
      socket.on('disconnect', () => {
        console.log('disconnected');
        socket.close();
      });
    }
  }, 
  mounted() {
    this.Run(); 
  }
}
</script>

<style scoped>
.log {
  padding: 16px; 
}
</style>